<template>
  <div>
    <a-page-header :ghost="false" title="文件存储设置">
      <div class="ele-text-secondary"> 用于指定文件存储引擎 </div>
    </a-page-header>
    <div class="ele-body">
      <a-card :bordered="false">
        <a-form
          ref="formRef"
          :model="form"
          :rules="rules"
          :label-col="styleResponsive ? { sm: 4, xs: 24 } : { flex: '100px' }"
          :wrapper-col="styleResponsive ? { sm: 20, xs: 24 } : { flex: '1' }"
          style="max-width: 800px; margin: 0 auto"
        >
          <a-form-item label="存储位置">
            <a-radio-group
              v-model:value="currentTab"
              button-style="solid"
              @change="changeRadio"
            >
              <a-radio-button value="local">本地</a-radio-button>
              <a-radio-button value="qiniu">七牛</a-radio-button>
              <a-radio-button value="cos">腾讯云</a-radio-button>
            </a-radio-group>
          </a-form-item>

          <div class="local" v-if="currentTab === 'local'">
            <a-form-item label="本地目录" name="file_path">
              <a-input
                allow-clear
                placeholder="请输入目录"
                v-model:value="form.file_path"
              />
            </a-form-item>
          </div>

          <div class="qiniu" v-if="currentTab === 'qiniu'">
            <a-form-item label="domain" name="domain">
              <a-input
                allow-clear
                placeholder="请输入domain"
                v-model:value="form.domain"
              />
            </a-form-item>
            <a-form-item label="bucket" name="bucket">
              <a-input
                allow-clear
                placeholder="请输入bucket"
                v-model:value="form.bucket"
              />
            </a-form-item>
            <a-form-item label="access_key" name="access_key">
              <a-input
                allow-clear
                placeholder="请输入AK"
                v-model:value="form.access_key"
              />
            </a-form-item>
            <a-form-item label="secret_key" name="secret_key">
              <a-input
                allow-clear
                placeholder="请输入SK"
                v-model:value="form.secret_key"
              />
            </a-form-item>
          </div>
          <div class="cos" v-if="currentTab === 'cos'">
            <a-form-item label="cos_app_id" name="cos_app_id">
              <a-input
                allow-clear
                placeholder="cos_app_id"
                v-model:value="form.cos_app_id"
              />
            </a-form-item>
            <a-form-item label="cos_secret_id" name="cos_secret_id">
              <a-input
                allow-clear
                placeholder="请输入cos_secret_id"
                v-model:value="form.cos_secret_id"
              />
            </a-form-item>
            <a-form-item label="cos_secret_key" name="cos_secret_key">
              <a-input
                allow-clear
                placeholder="请输入cos_secret_key"
                v-model:value="form.cos_secret_key"
              />
            </a-form-item>
            <a-form-item label="cos_region" name="cos_region">
              <a-input
                allow-clear
                placeholder="请输入cos_region"
                v-model:value="form.cos_region"
              />
            </a-form-item>
            <a-form-item label="cos_bucket" name="cos_bucket">
              <a-input
                allow-clear
                placeholder="请输入cos_bucket"
                v-model:value="form.cos_bucket"
              />
            </a-form-item>
            <a-form-item label="cos_cdn" name="cos_cdn">
              <a-input
                allow-clear
                placeholder="请输入cos_cdn"
                v-model:value="form.cos_cdn"
              />
            </a-form-item>
<!--            COS_APP_ID=1254331304-->
<!--            COS_SECRET_ID=AKIDT4mghfWQLPWiMD41x1ETfs3FQYht8JYg-->
<!--            COS_SECRET_KEY=JVcZWWbfghdVIwRvLalrbP8veISG1gBW-->
<!--            COS_REGION=ap-chongqing-->
<!--            COS_BUCKET=kxcxcx-->
<!--            COS_CDN=https://static1.cqtlcm.com-->
          </div>
          <a-form-item
            :wrapper-col="
              styleResponsive ? { sm: { offset: 4 } } : { offset: 3 }
            "
          >
            <a-space size="middle">
              <a-button @click="finishPageTab()">关闭</a-button>
              <a-button type="primary" :loading="loading" @click="submit">
                提交
              </a-button>
            </a-space>
          </a-form-item>
        </a-form>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { message } from 'ant-design-vue/es';
  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
  import { storeToRefs } from 'pinia';
  import { useThemeStore } from '@/store/modules/theme';
  import useFormData from '@/utils/use-form-data';
  import { finishPageTab } from '@/utils/page-tab-util';
  import { FileForm } from '@/api/setting/model';
  import { getConfig, submitForm } from '@/api/setting';
  import { assignObject } from 'ele-admin-pro';

  // 是否开启响应式布局
  const themeStore = useThemeStore();

  const { styleResponsive } = storeToRefs(themeStore);

  //
  const formRef = ref<FormInstance | null>(null);

  // 加载状态
  const loading = ref(false);

  const currentTab = ref('local');

  // 表单数据
  const { form, resetFields } = useFormData<FileForm>({
    file_path: undefined,
    domain: undefined,
    bucket: undefined,
    access_key: undefined,
    secret_key: undefined,
    cos_app_id: undefined,
    cos_secret_id: undefined,
    cos_secret_key: undefined,
    cos_region: undefined,
    cos_bucket: undefined,
    cos_cdn: undefined
  });

  // 表单验证规则
  const rules = reactive<Record<string, Rule[]>>({
    file_path: [
      {
        required: true,
        message: '请输入本地路径',
        type: 'string',
        trigger: 'blur'
      }
    ],
    domain: [
      {
        required: true,
        message: 'domain',
        type: 'string',
        trigger: 'blur'
      }
    ],
    bucket: [
      {
        required: true,
        message: '请输入bucket',
        type: 'string',
        trigger: 'blur'
      }
    ],
    access_key: [
      {
        required: true,
        message: '请输入access_key',
        type: 'string',
        trigger: 'blur'
      }
    ],
    secret_key: [
      {
        required: true,
        message: '请输入secret_key',
        type: 'string',
        trigger: 'blur'
      }
    ],
    cos_app_id: [
      {
        required: true,
        message: '请输入cos_app_id',
        type: 'string',
        trigger: 'blur'
      }
    ],
    cos_secret_id: [
      {
        required: true,
        message: '请输入cos_secret_id',
        type: 'string',
        trigger: 'blur'
      }
    ],
    cos_secret_key: [
      {
        required: true,
        message: '请输入cos_secret_key',
        type: 'string',
        trigger: 'blur'
      }
    ],
    cos_region: [
      {
        required: true,
        message: '请输入cos_region',
        type: 'string',
        trigger: 'blur'
      }
    ],
    cos_bucket: [
      {
        required: true,
        message: '请输入cos_bucket',
        type: 'string',
        trigger: 'blur'
      }
    ],
    cos_cdn: [
      {
        required: true,
        message: '请输入cos_cdn',
        type: 'string',
        trigger: 'blur'
      }
    ]
  });

  const query = () => {
    const params = {
      field: currentTab.value
    };
    getConfig(params).then((res) => {
      let data = JSON.parse(res.data);
      assignObject(form, data);
    });
  };

  /* 提交 */
  const submit = () => {
    if (!formRef.value) {
      return;
    }
    const newForm = {
      ...form,
      type: 'file',
      field: currentTab.value
    };
    formRef.value
      .validate()
      .then(() => {
        loading.value = true;
        submitForm(newForm).then((res) => {
          if (res.code === 0) {
            loading.value = false;
            resetFields();
            query();
            return message.success(res.message);
          } else {
            loading.value = false;
            return message.error(res.message);
          }
        });
      })
      .catch(() => {});
  };

  const changeRadio = (radio: any) => {
    currentTab.value = radio.target.value;
    query();
  };

  query();
</script>

<script lang="ts">
  export default {
    name: 'FormFile'
  };
</script>
